<template>
	<view class="bi-choose-contact" v-if="canChoose" @click="handleClick">
		选择通讯录
	</view>
</template>

<script>
export default {
	name: 'BiChooseContact',
	data () {
		return {
			canChoose: false
		}
	},
	created () {
		// #ifdef MP-WEIXIN
		this.canChoose = true
		// #endif
	},
	methods: {
		handleClick () {
			wx.chooseContact({
				success: (rs) => {
					let phoneNumber = rs.phoneNumber
					if (phoneNumber) {
						phoneNumber = phoneNumber.replace(/\s/g, '')
					}
					this.$emit('choose', {
						phoneNumber,
						displayName: rs.displayName
					})
				}
			})
		}
	}
}
</script>

<style lang="less">
.bi-choose-contact{
  margin-left: 20rpx;
  margin-top: 15rpx;
  text-align: center;
  width: 140rpx;
	padding: 0rpx 10rpx;
	height: 50rpx;
	line-height: 50rpx;
	color: white;
  font-size: 25rpx;
	//padding: 0 9px;
	border-radius: 3px;
	background-color: grey;
  border-radius: 15rpx;
	&:active {
		color: white;
		background-color: #eee;
	}
}
</style>